<template>
  <div id="app">
    <!--<Tinymce/>-->
    <div class="add-button">
      <import-excel-common title="上传" @getResult="getMyExcelData"></import-excel-common>
      <el-button @click="exportExcel">导出</el-button>
    </div>
    <export-excel-common ref="myChild" :exportExcelInfo="exportExcelInfo" :tableData="tableAllData" :exportExcelArry="exportExcelArry"></export-excel-common>
  </div>
</template>

<script>
  import importExcelCommon from './components/excel/index'
  import exportExcelCommon from './components/excel/ExportExcelCommon'
//import Tinymce from './components/Tinymce'

export default {
  name: 'App',
  components: {
     importExcelCommon,
     exportExcelCommon
  },
  data() {
    return {
      //导出表格字段及formatter信息
      exportExcelArry: [{
        prop: 'id',
        label: 'id',
        formatterFlag: false
      },{
        prop: 'name',
        label: 'name',
        formatterFlag: false
      },{
        prop: 'crop_id',
        label: 'crop_id',
        formatterFlag: false
      },{
        prop: 'type',
        label: 'type',
        formatterFlag: true,
        formatterType: 'common-type',
        formatterInfo: [{value: 0,label: '未完成'},{value: 1,label: '已完成'}]
      },{
        prop: 'pest',
        label: 'pest',
        formatterFlag: false
      },{
        prop: 'info',
        label: 'info',
        formatterFlag: false
      }],
      //导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'record-table',
        excelName: '数据导出.xlsx'
      },
      //需要导出的table数据
      tableAllData: [],
    }
  },
  methods: {
    getMyExcelData(data){
      // data为读取Excel的原始数据，这里可以对Excel进行格式校验和数据格式化处理
      console.log(data);

      this.tableAllData.length = 0
      for (let i=1; i< data.length; i++) {
        //let intro = data[0][5]
        let introContent = data[i][5]
        let happen = data[0][6]
        let happenContent = data[i][6]
        let solveWay = data[0][7]
        let solveWayContent = data[i][7]

        //let pic = data[i][8]?data[i][8].split(',')[0]:''
        let id = '' + i
        let name = '' + data[i][1]
        let crop_id = ''
        let type = ''
        let pest = '' + data[i][1].split('-')?data[i][1].split('-')[1]:''
        let info = ''

        /*if (pic){
          info += `<p style="text-align: center;"><img src="${pic}" alt="" width="100%" /></p>`
        }*/
        //info += `<p style="text-align: center;"><strong>${name}${intro}</strong></p>`
        info += `<p style="text-align: left;">${introContent}</p>`
        info += `<p style="text-align: center;"><strong>${happen}</strong></p>`
        info += `<p style="text-align: left;">${happenContent}</p>`
        info += `<p style="text-align: center;"><strong>${solveWay}</strong></p>`
        info += `<p style="text-align: left;">${solveWayContent}</p>`

        let item = {
          id,
          name,
          crop_id,
          type,
          pest,
          info
        }

        this.tableAllData.push(item)
      }

    },
    exportExcel () {
      setTimeout(()=>{
        this.$refs.myChild.exportExcel();
      },500)
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
